<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('预算、预测、实际回款周汇总')" />
    <link th:href="@{/ajax/libs/layui/css/layui.css}" rel="stylesheet"/>
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 select-table table-striped table-responsive">
                <div class="demoTable ">
                    项目编号：
                    <div class="layui-inline">
                        <input class="layui-input" name="id" id="contractNo" autocomplete="off">
                    </div>
                    &nbsp;&nbsp;&nbsp;项目名称：
                    <div class="layui-inline">
                        <input class="layui-input" name="id" id="contractName" autocomplete="off">
                    </div>
                    <button class="layui-btn" id="reloadBtn" >搜索</button>
                    <button class="layui-btn" id="resetBtn" >重置</button>
                    <form class="layui-form" style="float:right;" action="">
                        <div class="layui-form-item">
                            <div class="layui-input-inline">
                                <select id="quarter" lay-filter="quarter">
                                    <option value="">请选择时间周期</option>
                                    <option value="0">全年</option>
                                    <option value="1">一季度</option>
                                    <option value="2">二季度</option>
                                    <option value="3">三季度</option>
                                    <option value="4">四季度</option>
                                </select>
                            </div>
                        </div>
                    </form>
                    <table class="layui-hide" id="layListId" lay-filter="layList"></table>
                    <script type="text/html" id="toolbar">
                        <div class="layui-btn-container">
                            <button class="layui-btn layui-btn-sm" lay-event="moneyBack">回款管理</button>
                            <button class="layui-btn layui-btn-sm" lay-event="totally">周汇总合计</button>
                        </div>
                    </script>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />

    <script th:inline="javascript">
        var week = [[${week}]];
        function toPivot(i,id,no,name) {
            var level = '项目级';
            var type;
            if(i < week){
                type = '实际';
            } else {
                type = '预测';
            }
            var title = name + '(' + no + ')' + level + '第' + i + '周' + type + '回款表';
            var options = {
                title: title,
                width: "960",
                url: ctx + "system/weekly/weeklyPivotTable?&type=" + type + "&week=" + i + "&level=" + level + "&contractId=" + id
            };
            $.modal.openOptions(options);
        }
        //动态生成列
        function createColumns(columns,start,end){
            columns.push({
                type: 'checkbox',
                fixed: 'left'
            }, {
                field: 'xsPrincipalName',
                title: '销售人员',
                fixed: 'left',
                sort: true
            }, {
                field: 'contractNo',
                title: '项目编号',
                fixed: 'left',
                width: 150,
                sort: true
            }, {
                field: 'contractName',
                title: '项目名称',
                fixed: 'left',
                width: 300
            });
            for(let i=start; i<end; i++){
                let column = new Object();
                column.field = 'W' + i;
                column.title = 'W' + i;
                column.sort = true;
                column.templet = '<div><a href="#" onclick="toPivot(' + i + ', \'{{d.contractId}}\',\'{{d.contractNo}}\',\'{{d.contractName}}\')" class="layui-table-link">{{d.W' + i + '}}</a></div>';
                if(week == i){
                    column.style = 'background:#F0E68C';
                }
                columns.push(column);
            }
            return columns;
        }

        layui.use(['table','form'], function() {
            var form = layui.form;
            form.on('select(quarter)', function (data) {
                console.log(data);
                if(data.value != ''){
                    reload({});
                }
            });
            var table = layui.table;
            var columns =  new Array();
            columns.push({
                type: 'checkbox',
                fixed: 'left'
            }, {
                field: 'xsPrincipalName',
                title: '销售人员',
                fixed: 'left',
                sort: true
            }, {
                field: 'contractNo',
                title: '项目编号',
                fixed: 'left',
                width: 150,
                sort: true
            }, {
                field: 'contractName',
                title: '项目名称',
                fixed: 'left',
                width: 300
            });
            for(let i=1; i<54; i++){
                let column = new Object();
                column.field = 'W' + i;
                column.title = 'W' + i;
                column.sort = true;
                column.templet = '<div><a href="#" onclick="toPivot(' + i + ', \'{{d.contractId}}\',\'{{d.contractNo}}\',\'{{d.contractName}}\')" class="layui-table-link">{{d.W' + i + '}}</a></div>';
                if(week == i){
                    column.style = 'background:#F0E68C';
                }
                columns.push(column);
            }
            table.render({
                elem: '#layListId',
                id: 'layTableId',
                url: 'contractWeekly',
                method: 'post',
                request: {
                    pageName: 'pageNum' //页码的参数名称，默认：page
                    ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
                },
                where: {
                    quarter:'0'
                },
                title: '项目回款预测周汇总',
                toolbar: '#toolbar', //开启头部工具栏，并为其绑定左侧模板
                defaultToolbar: ['filter', 'exports', 'print'],
                cellMinWidth: 100,
                cols: [
                    columns
                ],
                page: true,
                done:function(res,curr,count){
                    var data = res.data;
                    var list = [];
                    console.log(data[0]);
                    table.init('layListId',{
                        cols:[list]
                        ,data:res.data
                        ,limit:10
                    });
                },
                parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res.rows //解析数据列表
                    };
                }
            });

            function reload(contractDetail){
                contractDetail.quarter = $('#quarter').val();
                columns = []
                let newcColumns = [];
                //columns = createColumns(columns,contractDetail.quarter)
                // //执行重载 reload表头不变只能render
                table.render({
                    elem: '#layListId',
                    id: 'layTableId',
                    url: 'contractWeekly',
                    method: 'post',
                    request: {
                        pageName: 'pageNum' //页码的参数名称，默认：page
                        ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
                    },
                    where: {
                        quarter:contractDetail.quarter
                    },
                    title: '项目回款预测周汇总',
                    toolbar: '#toolbar', //开启头部工具栏，并为其绑定左侧模板
                    defaultToolbar: ['filter', 'exports', 'print'],
                    cellMinWidth: 100,
                    cols: [
                        []
                    ],
                    page: true,
                    done:function(res,curr,count){
                        var data = res.data;
                        var list = [];
                        let weekData = Object.keys(data[0])
                        weekData.sort();
                        weekData.shift();
                        weekData.pop();
                        weekData.pop()
                        weekData.pop()
                        weekData.pop()
                        weekData.sort(function (a, b) {
                             return a.slice(1) - b.slice(1)
                         });
                        let first = parseFloat(weekData[0].slice(1));
                        let last = parseFloat(weekData[weekData.length - 1].slice(1)) + 1;
                        columns =  createColumns(columns,first,last)
                        //套娃再来一层
                        table.render({
                            elem: '#layListId',
                            id: 'layTableId',
                            url: 'contractWeekly',
                            method: 'post',
                            request: {
                                pageName: 'pageNum' //页码的参数名称，默认：page
                                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
                            },
                            where: {
                                quarter:'0'
                            },
                            title: '项目回款预测周汇总',
                            toolbar: '#toolbar', //开启头部工具栏，并为其绑定左侧模板
                            defaultToolbar: ['filter', 'exports', 'print'],
                            cellMinWidth: 100,
                            cols: [
                                columns
                            ],
                            page: true,
                            parseData: function(res){ //res 即为原始返回的数据
                                return {
                                    "code": res.code, //解析接口状态
                                    "msg": res.msg, //解析提示文本
                                    "count": res.total, //解析数据长度
                                    "data": res.rows //解析数据列表
                                };
                            }
                        });



                    },
                    parseData: function(res){ //res 即为原始返回的数据
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.msg, //解析提示文本
                            "count": res.total, //解析数据长度
                            "data": res.rows //解析数据列表
                        };
                    }
                });
            }

            $('#reloadBtn').on('click', function(){
                var contractDetail = {
                    contractNo: $('#contractNo').val(),
                    contractName: $('#contractName').val(),
                };
                reload(contractDetail);
            });
            $('#resetBtn').on('click', function(){
                $('#contractNo').val('');
                $('#contractName').val('');
                var contractDetail = {
                    contractNo: $('#contractNo').val(),
                    contractName: $('#contractName').val(),
                };
                reload(contractDetail);
            });
            //监听工具条
            table.on('toolbar(layList)', function(obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event) {
                    case 'moneyBack':
                        var data = checkStatus.data;
                        if(data.length === 1){
                            openMoneyBack(data[0]);
                        }else{
                            layer.msg('请选择一条数据');
                        }
                        break;
                    case 'totally':
                        var data = checkStatus.data;
                        layer.msg('选中了：'+ data.length + ' 个');
                        break;
                    default:
                        //layer.msg(data.contractName);
                        break;
                }
            });
            function openMoneyBack(data) { //打开回款管理模块
                $.modal.openOptions({
                    title: '回款管理-' + data.contractName + '(' + data.contractNo + ')',
                    width: "1280",
                    btn: ['<i class="fa fa-close"></i> 关闭'],
                    url: ctx + "system/contractDetail/moneyBack/" + data.contractId,
                    callBack: function(index, layero) {
                        layer.close(index);
                    }
                });
            }
        });
    </script>
</body>
</html>